<!--
 * @Description: 
 * @Author: ljl
 * @Date: 2024-11-07 09:12:23
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-07 11:21:48
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <!-- 内部脚本 -->
    <script>
        function add(a , b){
            console.log('🚀 - add - a + b:', a + b)
            return a + b;
        }
        var c =add(1,2);
        console.log('🚀 - c:', c)
        var myAdd = function (a,b) {
            return a + b;
        }
        var d =add(1,2);
        console.log('🚀 - d:', d)
    </script>
</head>

<body>
    喜欢的水果：<input id="inputFruit" type="text" placeholder="喜欢的水果" value="苹果">    
    <br>
    <!-- 给按钮绑定事件 -->
    <input id="btn1" type="button" value="按钮1" onclick="clickBtn1()">
    <input id="btn2" type="button" value="按钮2" onclick="add(1,2)">
    <input id="btn3" type="button" value="按钮3" onclick="clickBtn3()">
</body>
    <script>
        // 获取输入框元素
        var fruitElement = document.getElementById("inputFruit");
        // alert("阻塞运行");
        console.log('🚀 - fruitElement :', fruitElement );
        if(fruitElement){
            var fruitValue = fruitElement.value;
            console.log('🚀 - fruitValue:', fruitValue)
            switch(fruitValue){
                case "苹果":
                // alert("用户喜欢苹果");
                break;
                case "香蕉":
                // alert("用户喜欢香蕉");
                break;
            }
        }
        function clickBtn1() {
            console.log("btn1被点击");
        }
        // 通过id获取按钮元素
        var btn3 = document.getElementById("btn3");
        console.log('🚀 - btn3:', btn3)
        if(btn3){
            btn3.onclick = function(){
                console.log("btn3被点击");
            }
        }

        </script>
    <!-- 外部脚本 -->
    <!-- <script src="./js/index.js"> -->
    </script>
</html>